Of Stack

JS of jQuery realizes chat and receives message language automatic reminder function. Detailed explanation [prompt] If you have new messages please pay attention to check []

  • 2021-12-09 08:21:42
  • OfStack

This article describes the example of JS (jQuery) to achieve the chat received message language automatic reminder function. Share it for your reference, as follows:

Summary

Recently, a customer service system on the web page is being developed. The demand requires both parties to have a voice reminder when they receive the message, and if there is an unread message on the customer service side, it is required to give the customer service a voice reminder every 5 minutes. The customer service chat system uses PHP's Workerman framework to develop. Because the function of voice reminder is 1, it is simply described in this blog post, and only the function record of timing cycle reminder is carried out, not the real-time voice reminder, because the thinking is 1, mainly to see how to realize the automatic voice playing function.

Train of thought

Real-time reminder

This is more clear, that is, when receiving the message, the voice will be played, and everyone can put the code in the right place according to their own logic.

Timing reminder

This is mainly to judge whether there is an unread message, if there is a voice reminder, if there is no reminder. Therefore, we should write a timer on HTML page, visit the interface once every 5 minutes, inquire whether there are unread messages in customer service, and then develop an interface in the background to return whether there are unread messages in customers.

Code implementation 


<!--=======================================-->
<!--Created by ZHIHUA · WEI.-->
<!--Author: Wei ZhiHua-->
<!--Date: 2019/01/09-->
<!--Time:  Afternoon  17:26-->
<!--Project: ZHIHUA · WEI-->
<!--Power:JS Realize the automatic reminder when chatting receives message language -->
<!--=======================================-->
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>JS Realize the automatic reminder when chatting receives message language ( If you have any new information, please check it carefully )</title>
  <!-- Introduce CSS , JS-->
  <script type="text/javascript" src="public/common/js/jquery-1.8.1.min.js"></script>
</head>
<style>
  #audio_click {
    margin-top: 32px;
    height: 40px;
  }
  #audio_click a {
    text-decoration: none;
    background: #2f435e;
    color: #f2f2f2;
    padding: 10px 30px 10px 30px;
    font-size: 16px;
    font-family:  Microsoft Yahei ,  Song Style , Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    border-radius: 3px;
    -webkit-transition: all linear 0.30s;
    -moz-transition: all linear 0.30s;
    transition: all linear 0.30s;
  }
  #audio_click a:hover {
    background: #385f9e;
  }
</style>
<body>
<!--dom Structural part -->
<div style="width: 100%;text-align: center">
  <!-- Used to store item-->
  <h1>JS Realize the automatic reminder when chatting receives message language </h1>
  <h3>( If you have any new information, please check it carefully )</h3>
  <div id="audio_click">
    <a id="btn_audio" href="#" rel="external nofollow" > Play voice </a>
  </div>
  <div id="audio_play"></div>
</div>
</body>
<script>
  $(function () {
    var html = '';
    html += '<audio id="audioPlay">';
    // Format ogg Audio address 
    html += '<source src="/public/static/layui/newmsg.ogg" type="audio/ogg">';
    // Format mp3 Audio address 
    html += '<source src="/public/static/layui/newmsg.mp3" type="audio/mpeg">';
    // Format wav Audio address 
    html += '<source src="/public/static/layui/newmsg.wav" type="audio/wav">';
    html += '</audio>';
    // Writing code to the page 
    $(html).appendTo("#audio_play");
    // Polling ajax Detect unread messages, and every 5 Minutes 
    var setTime = setInterval(function () {
      $.ajax({
        type: "post",
        url: "{:url('index/getNoReadMsg')}", // Check customer service for unread messages 
        dataType: "json",
        success: function (ret) {
          if (ret.code == 1) {
            // If yes, play a voice reminder 
            $('#audioPlay')[0].play();
          }
        }
      });
    }, 300000);
  });
  $("#btn_audio").click(function () {
    // This code is the key code for playing voice 
    $('#audioPlay')[0].play();
  });
</script>
</html>

Download

This source package file I have uploaded to the resource library, the need for children's shoes can be downloaded, which contains code and audio files.

Click here to download the complete example code.

After that, you can modify the corresponding resource path in the code and use it.

For more readers interested in JavaScript related contents, please check the special topics of this site: "Summary of ajax Operation Skills in JavaScript", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Traversal Algorithm and Skills" and "Summary of JavaScript Mathematical Operation Usage"

I hope this article is helpful to everyone's JavaScript programming.

Related articles: